<template>
    <div class="grandChild">
        <h2>我是孙组件</h2>
        <h4>银子：{{ money }}万元</h4>
        <h4>汽车：{{ car.name }}--价格：{{ car.price }}万元</h4>
        <button @click="minusMoney">花爷爷的钱</button>
    </div>
</template>

<script lang="ts" setup name="GrandChild">
import {ref} from "vue";
import {inject} from "vue";

let {money, updateMoney} = inject('qian', {
    money: 0, updateMoney: (x: number) => {
    }
})
let car = inject('che', {name: '未知', price: 0})

function minusMoney() {
    updateMoney(5)
}
</script>

<style scoped>
.grandChild {
    margin-left: 30px;
    height: 300px;
    width: 40%;
    background-color: chartreuse;
}
</style>
